<template>
  <cu-layout :navProp="{ bgColor: 'rgba(255,255,255)' }">
    <view :class="[`${prefixCls}-about-container`]">
      <image class="house" :src="$CDN('/common/static/images/house@3x.png')"></image>
      <view class="card">
        <view class="title-box">
          <text class="title">关于我们</text>
        </view>
        <image class="logo" :src="$CDN('/common/static/images/color-logo.png')"></image>
        <view class="Medium">舒享居住 舒享体验 舒享服务 舒享生活</view>
        <view class="container-text">
          苏享家是苏州城投住房租赁有限公司旗下租赁住房业务品牌，围绕“温暖城市，安居每一个梦想”的品牌理念，秉持亲切暖心、便利省心、诚信放心、融洽开心、舒适安心的服务理念，为每一位在苏州奋斗的人士提供一个温暖的家。
        </view>
        <view class="agreement-container">
          <text class="agreement" @click="handleJump({ title: '用户协议', subtitle: 'user_agreement' })">《用户协议》</text>和
          <text class="agreement" @click="handleJump({ title: '苏享家隐私政策', subtitle: 'privacy_policy' })">《隐私政策》</text>
        </view>
        <view class="ICP">ICP备案号: 苏ICP备19016005号</view>
      </view>
      <view class="footer">
        <view class="box"> 无中介费·租期灵活·押一付一 共享空间·社群派对·国企运营 </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'about',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      aboutUrl: CDN('/manage/static/images/about.jpg'),
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handleJump({ title, subtitle }) {
      this.$ROUTE.go(`/pages/subpackage/privacy-policy/privacy-detail?title=${title}&subtitle=${subtitle}`)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('about-container')} {
  position: relative;
  background: linear-gradient(to bottom, #23997a 0%, #259a8f 25%, #299caf 80%, #22997b 100% /* 结束颜色，到右边结束 */);
  width: 100%;
  padding-bottom: 16px;
  box-sizing: border-box;
  overflow: hidden;
  .house {
    width: 194px;
    height: 96px;
    margin-bottom: 62px;
  }
  .card {
    padding: 40px 30px;
    background: white;
    margin: 0 16px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 165px;
    .title-box {
      text-align: center;
      color: #ffffff;
      background: cdn('/common/static/images/Line%403x.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    .title {
      background: linear-gradient(90deg, #229979 0%, #2d9ecf 100%);
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      box-sizing: border-box;
      border-radius: 8rpx;
      padding: 2px 36px;
    }
    .logo {
      margin-top: 30px;
      margin-bottom: 16px;
      width: 148px;
      height: 35px;
    }
    .Medium {
      font-weight: 500;
      font-size: 14px;
      color: #159675;
      line-height: 24px;
      text-align: center;
      margin-bottom: 20px;
    }
    .container-text {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 28px;
      text-align: left;
    }
  }
  .footer {
    // margin: 0 16px;
    // width: calc(100% - 32px);
    padding: 0 32rpx;
    box-sizing: border-box;
    overflow: hidden;
    height: 148rpx;
    background: cdn('/common/static/images/desc.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;

    display: flex;
    justify-content: right;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: center;
    .box {
      margin-right: 20rpx;
      // position: absolute;
      // top: 30rpx;
      // right: 24rpx;
      background: linear-gradient(90deg, #229979 0%, #2d9ecf 100%);
      border-radius: 4px 4px 4px 4px;
      width: 300rpx;
      box-sizing: border-box;
      font-size: 20rpx;
      color: #ffffff;
      padding: 20rpx;
      line-height: 14px;
    }
  }
  .agreement-container {
    margin: 10px 0;
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    .agreement {
      color: $uv-primary;
    }
  }
  .ICP {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
  }
}
</style>
